<form name="commandsForm">
  <div class="factory-commands-panel" layout="column">
    <div layout="column" layout-align="start start">
      <div layout="row" layout-align="start start"
           class="factory-commands-input">
        <che-input che-form="commandsForm"
                   che-name="name"
                   che-place-holder="Name of the command"
                   aria-label="Name of the command"
                   ng-model="factoryCommandCtrl.commandLineName"
                   required>
          <div ng-message="required">A name is required.</div>
        </che-input>
        <che-input che-form="commandsForm"
                   che-name="commandLine"
                   aria-label="Command"
                   che-place-holder="Command Line: example: mvn clean install -f ${current.project.path}"
                   che-width="auto"
                   ng-model="factoryCommandCtrl.commandLine"
                   required
                   ng-minlength="1"
                   ng-maxlength="500">
          <div ng-message="required">A command is required.</div>
          <div ng-message="minlength">The command has to be more than 1 character long.</div>
          <div ng-message="maxlength">The command has to be less than 500 characters long.</div>
        </che-input>
      </div>
      <che-button-primary che-button-title="Add"
                          ng-click="factoryCommandCtrl.addCommand()"
                          ng-disabled="commandsForm.$invalid"></che-button-primary>
    </div>

    <md-content md-scroll-y flex class="factory-commands-list">
      <div ng-if="factoryCommandCtrl.factoryObject.workspace.commands.length > 0">
        <che-list>
          <che-list-item ng-repeat="command in factoryCommandCtrl.factoryObject.workspace.commands"
                         flex="100">
            <div layout="row" flex>
              <div layout="column"
                   layout-align="start start"
                   class="factory-commands-row-command-name">
                <span>{{command.name}}</span>
              </div>
              <div flex
                   layout="column"
                   layout-align="start start"
                   ng-click="factoryCommandCtrl.editCommand($event, $index)"
                   class="factory-commands-row-command">
                {{command.commandLine}}
              </div>
              <div flex="10" layout="row" layout-align="center start"
                   class="che-list-actions">
                <div ng-click="factoryCommandCtrl.removeCommand($index)" class="factory-commands-widget-actions">
                  <span class="fa fa-times-circle"></span>
                </div>
                <div ng-click="factoryCommandCtrl.editCommand($event, $index)" class="factory-commands-widget-actions">
                  <span class="fa fa-edit"></span>
                </div>
              </div>
            </div>
          </che-list-item>
        </che-list>
      </div>
    </md-content>
  </div>
</form>
